<template>
  <div class="theme">
    <van-cell-group title="组标题 Label 不可编辑">
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
      <van-cell title="展示箭头" is-link />
      <van-cell title="展示箭头" is-link value="内容" />
      <van-field
        input-align="right"
        center
        clearable
        readonly
        label="短信验证码"
        placeholder="请输入短信验证码"
        value="186****2928"
      >
        <template #button>
          <van-button type="info" size="mini" round>获取验证码</van-button>
        </template>
      </van-field>
    </van-cell-group>
    <van-cell-group title="组标题 Field 可编辑">
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入用户名"
        input-align="right"
      />
      <van-field
        v-model="radio"
        label="单选结果"
        placeholder="请单选"
        input-align="right"
        required
      />
      <g-radios title="右侧单选" :radios="radios" v-model="radio"></g-radios>
    </van-cell-group>
    <g-button @click="dialog.visible = true">点击按钮提示</g-button>
    <g-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :buttonText="dialog.buttonText"
      @confirm="dialog.visible = false"
    >
      {{ dialog.content }}
    </g-dialog>
    <g-card title="Card 标题">
      <g-card-label label="输入信息">输入信息</g-card-label>
      <g-card-label label="输入信息">输入信息</g-card-label>
      <van-divider />
      <g-card-label label="输入信息">输入信息</g-card-label>
      <g-card-label label="输入信息">输入信息</g-card-label>
      <g-card-label label="输入信息">输入信息</g-card-label>
    </g-card>
    <van-divider />
    <g-tip>
      温馨提示：系统提供数据仅供参考。如有疑问请拨打12333服务热线。
    </g-tip>
    <van-divider />
    <g-tip>
      填表说明：
      <br />
      1、本表是发放中华人民共和国社会保障卡的原始依据，申领人必须认证填写并提供真实有效的资料，因提供资料错误所造成的的一切损失自行承担。
      <br />
      2、申领人须提供本人的有效身份证复印件。
      <br />
      3、16周岁以内的请填写监护人姓名及
      身份证号，户口簿本人页和监护人的身份证件电子扫描件。
      <br />
      4、个人照片：申领人近期、免冠、深色上衣，白底彩色电子照片。7周岁以下人员可以不提供电子照片（系统默认儿童卡通图片）。技术参数：像素：358*441，分辨率350dpi,大小30~100k。
    </g-tip>
    <van-divider />
    <g-article>
      <div slot="title">
        申领成功
      </div>
      <div slot="content">
        上传成功，您已成功提交社会保障卡申办信息，将在5个工作日内完成审核，请关注审核信息查询，如审核通过，请于45个工作日后携带本人有效身份证件到所选网点领取社保卡，代领请同时携带代领人有效身份证。如有疑问可咨询5309128、5301239（工作时间）。
      </div>
    </g-article>
  </div>
</template>

<script>
import Button from "@/components/common/button/Button.vue";
import Card from "@/components/common/card/Card.vue";
import CardLabel from "@/components/common/card/CardLabel.vue";
import Dialog from "@/components/common/dialog/Dialog.vue";
import Article from "@/components/common/layout/Article.vue";
import Radios from "@/components/common/radios/Radios.vue";
import Tip from "@/components/common/tip/Tip.vue";

export default {
  name: "Theme",
  components: {
    GButton: Button,
    GCard: Card,
    GDialog: Dialog,
    GTip: Tip,
    GArticle: Article,
    GRadios: Radios,
    GCardLabel: CardLabel
  },
  data() {
    return {
      username: "",
      radio: "1",
      radios: [
        {
          value: "1",
          label: "EMS"
        },
        {
          value: "2",
          label: "自取"
        }
      ],
      dialog: {
        visible: false,
        title: "审核不通过",
        buttonText: "确定",
        content:
          "无用户基本信息无用户基本信息无用户基本信息无用户基本信息无用户基本信息无用户基本信息"
      }
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
// 主题色 #4877E3 @blue
// 背景色 #F5F9FC @fill-body
// 文字颜色 #384253 @gray-8 = @text-color
.theme {
  width: 100%;
  min-height: 100%;
  background: @fill-body;
}
</style>
